<html lang="cn">

<head>
  <meta charset="UTF-8">
  <script src="../rem.js"></script>
  <meta name="format-detection" content="telephone = no">
  <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <title></title>
  <!-- <link rel="stylesheet" href="../mui/mui.min.css"> -->
  <!-- <script src="../mui/mui.min.js"></script> -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <link rel="stylesheet" href="../common.css">
  <link rel="stylesheet" href="./index.css">
  <script>
    function rembig(){
      setRemSize()
      window.addEventListener("resize",setRemSize,false)
      function setRemSize(){
        var width = document.documentElement.clientWidth
        if (width > 750) {
            width = 750
        }
        var _clientWidth = width / 7.5+'px'
        document.documentElement.style.fontSize = _clientWidth
      }
    }
    rembig()

  </script>
</head>

<body>
  <div class="container">
    <!-- 头部banner -->
    <div class="swiper-container banner">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <a href="">
            <img src="../images/home/home_banner_img.png" alt="" class="banner_item">
          </a>
        </div>
        <div class="swiper-slide">
          <a href="">
            <img src="../images/home/home_banner_img.png" alt="" class="banner_item">
          </a>
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>

    <div class="nav-icon">
        <img src="../images/home/home_jz_btn_icon.png" alt="">
        <img src="../images/home/home_rm_btn_icon.png" alt="">
        <img src="../images/home/home_sj_btn_icon.png" alt="">
        <img src="../images/home/home_hd_btn_icon.png" alt="">
    </div>
    <div class="nav-text">
      <div class="text">品牌价值</div>
      <div class="text">热门榜单</div>
      <div class="text">品牌视界</div>
      <div class="text">了解活动</div>
    </div>
    <div class="mid_tit">
      <div class="line"></div>
      <div class="tit">您可能感兴趣的行业</div>
      <div class="line"></div>
    </div>
    <img class="grayline" src="../images/home/home_zs_img.png"></img>
    <!-- <ul class="mui-table-view" id="task">
      <li class="mui-table-view-cell taskCell">
        <div class="mui-slider-left taskSliderLeft">
          <a class="mui-btn taskSliderBtn">
              <p>
                向左滑动
                <br>
                查看其他行业
              </p>
              <img src="../images/home/home_rmhy_list_icon@2x(1).png" alt="" srcset="">
            </a>
        </div>
        <div class="mui-slider-right taskSliderRight">
          <a class="mui-btn taskSliderBtn">
            <p>
              向左滑动
              <br>
              查看其他行业
            </p>
            <img src="../images/home/home_rmhy_list_icon@2x.png" alt="" srcset="">
          </a>
        </div>
        <div class="mui-slider-handle taskSliderCenter">
          <img src="../images/home/home_rmhy_bg_img.png"  ondragstart="return false;" alt="" srcset="">
          <div class="taskSliderCenterContent">
              taskSliderCenter
          </div>
        </div>
      </li>
    </ul> -->
    <!-- <ul class="taskCellView" id="task">
      <li class="taskCell">
        <div class="taskSliderRight">
          <a class="taskSliderBtn taskSliderBtnLeft" data-direction="right"  data-index="0">
            <p>点击查看</p>
            <p>上一行业</p>
            <img src="../images/home/home_rmhy_list_icon@2x.png">
          </a>
        </div>
        <div class="taskSliderCenter">
          <img src="../images/home/home_rmhy_bg_img.png"  ondragstart="return false;">
          <div class="taskSliderCenterContent">
            <p class="title needEllipsis">润滑油行业</p>
            <p class="classification needEllipsis">2019年度十大品牌</p>
            <div class="button">去看看</div>
          </div>
        </div>
        <div class="taskSliderRight" style="display: none">
          <a class="taskSliderBtn taskSliderBtnRight" data-direction="left"  data-index="0">
            <p>点击查看</p>
            <p>下一行业</p>
            <img src="../images/home/home_rmhy_list_icon@2x.png">
          </a>
        </div>
      </li>
    </ul>
    <ul class="taskCellView" id="task">
      <li class="taskCell">
        <div class="taskSliderRight">
          <a class="taskSliderBtn" data-direction="right" data-index="1">
            <p>点击查看</p>
            <p>下一行业</p>
            <img src="../images/home/home_rmhy_list_icon@2x.png">
          </a>
        </div>
        <div class="taskSliderCenter">
          <img src="../images/home/home_rmhy_bg_img.png"  ondragstart="return false;">
          <div class="taskSliderCenterContent">
            <p class="title needEllipsis">润滑油行业</p>
            <p class="classification needEllipsis">2019年度十大品牌</p>
            <div class="button">去看看</div>
          </div>
        </div>
      </li>
    </ul>
    <ul class="taskCellView" id="task">
      <li class="taskCell">
        <div class="taskSliderCenter">
          <img src="../images/home/home_rmhy_bg_img.png"  ondragstart="return false;">
          <div class="taskSliderCenterContent">
            <p class="title needEllipsis">润滑油行业</p>
            <p class="classification needEllipsis">2019年度十大品牌</p>
            <div class="button">去看看</div>
          </div>
        </div>
        <div class="taskSliderRight">
          <a class="taskSliderBtn" data-direction="left" data-index="2">
            <p>点击查看</p>
            <p>下一行业</p>
            <img src="../images/home/home_rmhy_list_icon@2x.png">
          </a>
        </div>
      </li>
    </ul> -->

    <ul class="taskCellView" id="task">
      <div class="swiper-wrapper taskCellWrapper">
        <li class="taskCell swiper-slide">
          <img src="../images/home/home_rmhy_bg_img.png"  ondragstart="return false;">
          <div class="taskSliderCenterContent">
            <p class="title needEllipsis">润滑油行业</p>
            <p class="classification needEllipsis">2019年度十大品牌</p>
            <div class="button">去看看</div>
          </div>
        </li>
        <li class="taskCell swiper-slide">
          <img src="../images/home/home_rmhy_bg_img.png"  ondragstart="return false;">
          <div class="taskSliderCenterContent">
            <p class="title needEllipsis">润滑油行业</p>
            <p class="classification needEllipsis">2019年度十大品牌</p>
            <div class="button">去看看</div>
          </div>
        </li>
      </div>
    </ul>

    <div class="mid_tit" style="margin-top: 0.6rem">
      <div class="line"></div>
      <div class="tit">热门榜单</div>
      <div class="line"></div>
    </div>

    <img class="grayline" src="../images/home/home_zs_img.png"></img>

    <div class="swiper-container swiper-container-h middle">
      <div class="swiper-wrapper">

        <div class="swiper-slide inside">
          <img class="item_img" src="../images/home/home_rmbd_ryb_img.png" alt="" class="banner_item">
          <div class="item_brand">润滑油行业</div>
          <div class="item_tit">十大品牌排行榜</div>
          <div class="item_time">2019-06-01</div>
        </div>
        <div class="swiper-slide inside inside2">
          <img class="item_img" src="../images/home/home_rmbd_list_img2.png" alt="" class="banner_item">
          <div class="item_brand">润滑油行业</div>
          <div class="item_tit">十大品牌排行榜</div>
          <div class="item_time">2019-06-01</div>
        </div>
        <div class="swiper-slide inside inside2">
          <img class="item_img" src="../images/home/home_rmbd_list_img3.png" alt="" class="banner_item">
          <div class="item_brand">润滑油行业</div>
          <div class="item_tit">十大品牌排行榜</div>
          <div class="item_time">2019-06-01</div>
        </div>
        <div class="swiper-slide inside inside2">
          <img class="item_img" src="../images/home/home_rmbd_list_img4.png" alt="" class="banner_item">
          <div class="item_brand">润滑油行业</div>
          <div class="item_tit">十大品牌排行榜</div>
          <div class="item_time">2019-06-01</div>
        </div>
        <div class="swiper-slide inside inside2">
          <img class="item_img" src="../images/home/home_rmbd_list_img5.png" alt="" class="banner_item">
          <div class="item_brand">润滑油行业</div>
          <div class="item_tit">十大品牌排行榜</div>
          <div class="item_time">2019-06-01</div>
        </div>

      </div>
    </div>
    
    <div class="more">
      <div class="text">查看更多品牌</div>
      <img src="../images/home/home_more_btn_icon.png" alt="">
    </div>
    <div class="mid_tit">
      <div class="line"></div>
      <div class="tit">品牌视界</div>
      <div class="line"></div>
    </div>

    <img class="grayline" src="../images/home/home_zs_img.png"></img>
    
    <div class="goback_vote">返回投票</div>
    <div class="data_list">
      <div class="list">
        <div class="lef">
          <img src="../images/home/220cbe89a76f810e4e0782df29e42b4e.png" alt="">
        </div>
        <div class="mid">
        </div>
        <div class="rig">
          <div class="tit">科委国际和房东回复的点击回复交电话费的黄齑淡饭</div>
          <div class="des">这是一个很好吃的糖果哦拉拉然后呢就是很甜啦啦啦啦啦啦拉拉 福达合金返回点击回复的空间和房管局的回复大家都恢复健康的发发动机.</div>
        </div>
        <img class="bg" src="../images/home/home_list_img.png" alt="">
        <!-- 需求改了浏览人数不要 -->
        <!-- <div class="num">
          <img src="../images/home/hone_list_eye_icon.png" alt="">
          <div>1234</div>
        </div> -->

        <div class="time">2019.06.01</div>
      </div>
      <div class="list">
          <div class="lef">
            <img src="../images/home/220cbe89a76f810e4e0782df29e42b4e.png" alt="">
          </div>
          <div class="mid">
          </div>
          <div class="rig">
            <div class="tit">科委国际和房东回复的点击回复交电话费的黄齑淡饭</div>
            <div class="des">这是一个很好吃的糖果哦拉拉然后呢就是很甜啦啦啦啦啦啦拉拉 福达合金返回点击回复的空间和房管局的回复大家都恢复健康的发发动机.</div>
          </div>
          <img class="bg" src="../images/home/home_list_img.png" alt="">
          <div class="time">2019.06.01</div>
        </div>
        <div class="list">
            <div class="lef">
              <img src="../images/home/220cbe89a76f810e4e0782df29e42b4e.png" alt="">
            </div>
            <div class="mid">
            </div>
            <div class="rig">
              <div class="tit">科委国际和房东回复的点击回复交电话费的黄齑淡饭</div>
              <div class="des">这是一个很好吃的糖果哦拉拉然后呢就是很甜啦啦啦啦啦啦拉拉 福达合金返回点击回复的空间和房管局的回复大家都恢复健康的发发动机.</div>
            </div>
            <img class="bg" src="../images/home/home_list_img.png" alt="">
            <div class="time">2019.06.01</div>
          </div>  
    </div>
    <div class="more more2">
      <div class="text">查看更多品牌</div>
      <img src="../images/home/home_more_btn_icon.png" alt="">
    </div>

    <div class="bottomInfo">
        <img src="../images/报名活动页_slices/WeChat0cb4f1f9fa69309f03cd06c58006f7f2.png">
        <div style="color: rgba(156,156,156,1)">客服电话：123456789</div>
        <div class="feedback"><span>意见反馈</span> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<span>推荐参与活动</span></div>
        <div>中信品牌网</div>
    </div>
  </div>
  <script>
    var banner = new Swiper('.banner', {
      loop: true, // 循环模式选项
      speed:1000,
      autoplay : {
        delay:1000
      },
      pagination: {
        el: '.swiper-pagination',
      },
    
    });
    var swiperH = new Swiper('.swiper-container-h', {
        // init: false,
        allowSlidePrev : false,      //禁止向左滑动
        watchSlidesProgress: true,
        slidesPerView: 'auto',
        centeredSlides: true,
        loop: true,
        loopedSlides: 5,
        observeParents:true,
        // autoplay: true,
        // speed:1000,
        // autoplay : {
        //   delay:2000
        // },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        resizeReInit : true,
        updateOnImagesReady : true,
        on: {
          progress: function(progress) {
            for (i = 0; i < this.slides.length; i++) {
              var slide = this.slides.eq(i);
              var slideProgress = this.slides[i].progress;
              modify = 1;
              // if (Math.abs(slideProgress) > 1) {
              //   modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
              // }
              translate = slideProgress * modify * 3.45+ 'rem';
              scale = 1 - Math.abs(slideProgress) / 8;
              zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
              slide.transform('translateX(' + translate + ') scale(' + scale + ')');
              slide.css('zIndex', zIndex);
              slide.css('opacity', 1).children('img').nextAll().css('opacity', 1)
              if (Math.abs(Math.round(slideProgress)) > 2) {
                slide.css('opacity', 0);
              } else if (Math.abs(Math.round(slideProgress)) == 1) {
                slide.css('opacity', 0.8).children('img').nextAll().css('opacity', 0)
              } else if (Math.abs(Math.round(slideProgress)) == 2) {
                slide.css('opacity', 0.4).children('img').nextAll().css('opacity', 0)
              }
            }
          },
          setTransition: function(transition) {
            for (var i = 0; i < this.slides.length; i++) {
              var slide = this.slides.eq(i)
              slide.transition(transition);
            }

          }
        }
      });
    $(document).ready(function () {
      // var change = function () {
      //   var taskCellView = $('.taskCellView')
      //   var taskCell = $('.taskCell')
      //   var taskSliderBtnLeft = $('.taskSliderBtnLeft')
      //   var taskSliderBtnRight = $('.taskSliderBtnRight')
      //   for (var i = 0; i < taskCell.length; i++) {
      //     +function (i) {
      //       var animate = function () {
      //         $($(taskCell[i]).children()[0]).toggle()
      //         $($(taskCell[i]).children()[2]).toggle()
      //         $(taskCell[i]).css('transition','all .3s ease')
      //         $(taskCell[i]).css('transform','translateX(-100%)')
      //         $(taskCell[i]).css('opacity','0')
      //         setTimeout(() => {
      //           $(taskCell[i]).css('transform','translateX(0)')
      //           $(taskCell[i]).css('opacity','1')
      //         }, 600)
      //       }
      //       $(taskSliderBtnLeft[i]).click(animate)
      //       $(taskSliderBtnRight[i]).click(animate)
      //     }(i)
      //   }
        
      //   var arr = [0, 1, 2, 3, 4, 5]
      //   var endIndex
      //   switch (arr.length) {
      //     case 1:
      //     case 2:
      //       endIndex = 1
      //       break
      //     case 3:
      //       endIndex = 2
      //       break
      //     default:
      //       endIndex = 3
      //       break
      //   }
      //   $('.taskSliderBtn').click(function () {
      //     console.log($(this).data('direction'))
      //     var index = parseInt($(this).data('index'))
      //     // var index = 0
      //     switch ($(this).data('direction')) {
      //       case 'left':
      //         var newData = arr.splice(arr.length - 1, 1)[0]
      //         var oldData = arr.splice(index, 1, newData)[0]
      //         arr.splice(endIndex, 0, oldData)
      //         break
      //       case 'right':
      //         var newData = arr.splice(endIndex, 1)[0]
      //         var oldData = arr.splice(index, 1, newData)[0]
      //         arr.push(oldData)
      //         break
      //     }
      //     console.log(arr, index)
      //     for (var z = 0; z < arr.length; z++) {
      //       +function (z) {
      //         $(taskCellView[z]).find('.title').html(arr[z])
      //       }(z)
      //     }
      //   })
      // }
      // change()
      // mui.init();
      // (function($) {
			// 	//$.swipeoutOpen(el,direction)//打开指定列的滑动菜单，el:指定列的dom对象，direction：取值left|right，指定打开的是左侧或右侧滑动菜单
			// 	//$.swipeoutClose(el);//关闭指定列的滑动菜单，el:指定列的dom对象
			// 	//				setTimeout(function() {
			// 	//					$.swipeoutOpen(document.getElementById("OA_task_1").querySelector('li:last-child'), 'left');
			// 	//					setTimeout(function() {
			// 	//						$.swipeoutClose(document.getElementById("OA_task_1").querySelector('li:last-child'));
			// 	//					}, 1000);
			// 	//				}, 1000);
      //   //第一个demo，拖拽后显示操作图标，点击操作图标删除元素；
      //   var btnArray = ['删除']
			// 	$('#task').on('tap', '.mui-btn', function(event) {
			// 		var elem = this;
			// 		var li = elem.parentNode.parentNode;
			// 		mui.confirm('确认删除该条记录？', 'Hello MUI', btnArray, function(e) {
			// 			if (e.index == 0) {
			// 				li.parentNode.removeChild(li);
			// 			} else {
			// 				setTimeout(function() {
			// 					$.swipeoutClose(li);
			// 				}, 0);
			// 			}
			// 		});
			// 	});
      // })(mui);
      
      var swiper = new Swiper('.taskCellView', {
        // direction: 'vertical',
        slidesPerView: 'auto',
        freeMode: true,
        // scrollbar: {
        //   el: '.swiper-scrollbar',
        // },
        mousewheel: true,
      });
      // let startX = null
      // var swiper = new Swiper('.taskCellView', {
      //   slidesPerView: 'auto',
      //   centeredSlides: true,
      //   // loop : true,
      //   mousewheel: true,
      //   allowSlidePrev : false,
      //   on:{
      //     touchStart: function(e){
      //       startX = e.touches[0].clientX
      //     },
      //     touchMove: function(e){
      //       var dist = e.touches[0].clientX-startX
      //       console.log(dist);
      //       if(dist < 0){
      //         console.log('右')
      //       }else if(dist>0){
      //         console.log('左')
      //       }
      //     },
      //     touchEnd: function(e){
      //       console.log('end')
      //     }
      //   }
      // })

    })
  </script>
</body>
</html>
<script>
</script>
